<template>
  <div class="web-box">
    <div class="web-title"><i class="iconfont icon-internet-full"></i>{{ webGroup.label }}</div>
    <div class="web-list">
      <div class="web-item" v-for="(item, index) in webGroup.children" :key="index" @click="toHref(item.url)">
        <p> <img :src="item.img || giftLogo" alt="logo" /> {{ item.label }}</p>
        <p>
          <span v-for="tag in item.tags" :key="tag">{{ WebTag[tag] }}</span>
        </p>
      </div>
      <div class="web-item web-item-empty" v-for="item in 6 - (webGroup.children.length % 6)" :key="item"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { WebGroup } from '@mock/getWebs';
  import { WebTag } from '@mock/webTag.d';
  import { toRefs } from 'vue';
  import giftLogo from '@/assets/images/gift.png';

  const props = defineProps({
    webGroup: {
      type: Object,
      default: (): WebGroup => ({ label: '', children: [] }),
    },
  });
  const { webGroup } = toRefs(props);

  const toHref = (url: string): void => {
    window.open(url);
  };
</script>

<style lang="scss" scoped>
  .web-box {
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ede3e7;
    margin-bottom: 20px;

    .web-title {
      font-size: 18px;
      text-shadow: 2px 2px 0px #e9ddb6;
      padding-bottom: 6px;
      margin-bottom: 6px;

      > i {
        margin: 0 10px;
        line-height: 24px;
        font-size: 12px;
        vertical-align: middle;
        color: #815c94;
      }
    }

    .web-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .web-item {
        width: calc(100% / 7);
        font-size: 18px;
        line-height: 20px;
        padding: 10px;
        border-radius: 3px;
        cursor: pointer;
        margin-bottom: 10px;
        border: 1px dashed #ede3e7;

        transition: background-color 1s linear;

        &:hover {
          background: #e9d7df;
        }

        &.web-item-empty {
          background: rgba(0, 0, 0, 0);
          border: none;
        }

        span {
          font-size: 12px;
          display: inline-block;
          background-color: #ccc;
          margin-right: 3px;
          margin-top: 10px;
          padding: 0px 6px;
        }

        img {
          height: 18px;
          vertical-align: middle;
          margin-right: 6px;
        }
      }
    }
  }
</style>
